'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    ListView,
    RefreshControl,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import Toast from '../Utils/toast';
import TravelsDetails from '../Pages/TravelsDetails';
import UserAPIService from "../Commom/UserAPIService";
import DateUtil from '../Commom/DateUtil';
export default class MyTravelPage extends Component {
    constructor(props) {
        super(props);
        var travelData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            travelDataSource: travelData,
            isRefreshing: false,
            record_count: 1,
            page: 1,
            travelDataList: [],
        }
        ;
    }

    componentDidMount() {
        UserAPIService.travelList(Global.Const.token, Global.Const.registeredId, 1).then((ret)=> {

            this.setState({
                travelDataSource: this.state.travelDataSource.cloneWithRows(ret.result),
                travelDataList: ret.result,
                record_count: ret.record_count,
                page: Number(ret.page),
            });
        }).catch((err)=> {

        });
    }

    BackAction() {
        this.props.navigator.pop();
    }

    TravelsDetails(id) {
        this.props.navigator.push({
            name: 'TravelsDetails',
            component: TravelsDetails,
            passProps: {
                ID: id
            }
        });
    }

    //刷新数据
    onRefreshData() {
        this.setState({
            isRefreshing: true,
        });
        UserAPIService.travelList(Global.Const.token, Global.Const.registeredId, 1).then((ret)=> {
            this.setState({
                travelDataSource: this.state.travelDataSource.cloneWithRows(ret.result),
                travelDataList: ret.result,
                isRefreshing: false,
                record_count: ret.record_count,
                page: Number(ret.page),
            });
            Toast.show('刷新成功');
        }).catch((err)=> {
            this.setState({
                isRefreshing: false,
            });
        });
    }

    //加载更多数据
    loadMoreData() {
        console.log('why');
        if (this.state.page < this.state.record_count) {
            this.setState({
                isRefreshing: true,
            });
            UserAPIService.travelList(Global.Const.token, Global.Const.registeredId, this.state.page + 1).then((ret)=> {
                let wanjian = [];
                wanjian = this.state.travelDataList;
                for (var i = 0; i < ret.result.length; i++) {
                    wanjian.push(ret.result[i])
                }
                this.setState({
                    travelDataSource: this.state.travelDataSource.cloneWithRows(wanjian),
                    travelDataList: wanjian,
                    isRefreshing: false,
                    record_count: ret.record_count,
                    page: Number(ret.page),
                });
                Toast.show('加载成功');
            }).catch((err)=> {
            });
        } else {
            if (this.state.page != 1) {
                Toast.show('木有更多数据');
            }
        }

    }

    travelListRow(rowData, sectionID, rowID) {
        var time=DateUtil.dateStr(DateUtil.timestamp(rowData.time+""));
        return (
            <TouchableOpacity activeOpacity={0.5}
                              onPress={()=>this.TravelsDetails(rowData.id)}>
                <View style={{backgroundColor:'white'}}>
                    {rowData.images.length > 0 ? <View
                        style={{flexDirection:'row',backgroundColor:'white',marginTop:10}}>
                        <Image style={{width:90,height:90,marginLeft:10,marginRight:10}}
                               source={{uri:rowData.images[0]}}></Image>
                        <View style={{width:Global.Const.size.width-110}}>
                            <Text
                                style={{color:Global.FontColor.DimGray,marginRight:10,fontSize:16}}>{rowData.title}</Text>
                            <Text
                                style={{color:Global.FontColor.LightGrey,position:'absolute',left:0,bottom:5,fontSize:12}}>{rowData.time}</Text>
                        </View>
                    </View>
                        :
                        <View
                            style={{backgroundColor:'white',marginTop:10}}>
                            <Text
                                style={{color:Global.FontColor.DimGray,marginRight:10,fontSize:16,marginLeft:10,marginBottom:20}}>
                                {rowData.title}</Text>
                            <Text
                                style={{color:Global.FontColor.LightGrey,position:'absolute',right:10,bottom:0,fontSize:12}}>{rowData.time}</Text>
                        </View>
                    }
                    <View
                        style={{marginTop:10,width:Global.Const.size.width,height:15,backgroundColor:Global.Const.transparent}}>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }


    render() {
        return (
            <View style={styles.container}>
                <View
                    style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                    <View style={{marginTop:24,alignItems:'center'}}>

                        <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.BackAction()}>
                                <Image style={{resizeMode:'contain',width:21,height:21}}
                                       source={require('../../Image/icon_back.png')}></Image>
                            </TouchableOpacity>
                        </View>
                        <Text style={{fontSize:20,color:Global.FontColor.DimGray}}>我的游记</Text>
                    </View>
                </View>
                <ListView
                    refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshData()}}
                                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                    onEndReachedThreshold={100}
                    initialListSize={1}
                    onEndReached={() => {this.loadMoreData()}}
                    style={{borderTopWidth:2,borderColor:Global.Const.transparent}}
                    enableEmptySections={true}
                    dataSource={this.state.travelDataSource} renderRow={this.travelListRow.bind(this)}/>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});